<template>
	<view class="content">
		<div rl-type="stop" class="stop ">
			<div class="tabs" :class="active == 0 ? 'navactive' : ''" @click="active = 0">福彩3D</div>
			<div class="tabs" :class="active == 1 ? 'navactive' : ''" @click="active = 1">双色球</div>
			<div class="tabs" :class="active == 2 ? 'navactive' : ''" @click="active = 2">快乐8</div>
			<div class="tabs" :class="active == 3 ? 'navactive' : ''" @click="active = 3">七星彩</div>
		</div>

		<div class="title" v-show="active == 3">请选择本次开奖生肖：</div>
		<ul>
			<li v-show="active == 3" :class="item.active ? 'colorblues' : ''" v-for="(item, index) in liuheSX"
				@click="click(item, 'liuheSX')">
				{{ item.num | getword }}
			</li>
		</ul>
		<!-- <div class="bigtitle">号码</div> -->
		<div class="title">开奖号码：</div>
		<div class="overs">
			<span class="cishu" v-show="active == 0"><span>已选:</span><a>{{ fucai3dnumber }}</a><span>个</span></span>
			<span class="cishu" v-show="active == 1"><span>已选:</span><a>{{ shuangsenumber }}</a><span>个</span></span>
			<span class="cishu" v-show="active == 2"><span>已选:</span><a>{{ kuaile8number }}</a><span>个</span></span>
			<span class="cishu" v-show="active == 3"><span>已选:</span><a>{{ liuhenumber }}</a><span>个</span></span>
		</div>
		<div class="boxs">
			<ul class="ull">
				<li class="active" v-for="(  item, index  ) in   chackfucai3d  " @click="del(index, 'fucai3d')"
					v-show="active == 0">
					{{ item.num }}
				</li>
				<li class="active" v-for="(  item, index  ) in   chackshuangse  " @click="del(index, 'shuangse')"
					v-show="active == 1">
					{{ item.num }}
				</li>
				<li class="active" v-for="(  item, index  ) in   chackkuaile8  " @click="del(index, 'kuaile8')"
					v-show="active == 2">
					{{ item.num }}
				</li>
				<li class="active" v-for="(  item, index  ) in   chackliuhe  " @click="del(index, 'liuhe')"
					v-show="active == 3">
					{{ item.num }}
				</li>
			</ul>
		</div>

		<div class="title" v-show="active == 0 && fucai3dnumber != 0">福彩3D号码统计结果：</div>
		<div class="title" v-show="active == 1 && shuangsenumber != 0">双色球号码统计结果：</div>
		<div class="title" v-show="active == 2 && kuaile8number != 0">快乐8号码统计结果：</div>
		<div class="title" v-show="active == 3 && liuhenumber != 0">快乐8号码统计结果：</div>
		<!-- 福利彩票3D -->
		<div class="bigbox" v-for="(  item, index  ) in   fucai3dcount  " v-show="active == 0">
			<div>
				<span class="cishu"><span>出现次数:</span><a>{{ item.cishu }}</a></span>
				<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
			</div>
			<div class="boxs">
				<ul class="ulle" v-if="fucai3dnumber != 0">
					<li class="active" v-for="(  items, index  ) in   item.list  " @click="del(index, 'fucai3d')">
						{{ items }}
					</li>
				</ul>

			</div>
		</div>
		<!-- 双色球 -->
		<div class="bigbox" v-for="(  item, index  ) in   shuangsecount  " v-show="active == 1">
			<div>
				<span class="cishu"><span>出现次数:</span><a>{{ item.cishu }}</a></span>
				<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
			</div>
			<div class="boxs">
				<ul class="ulle" v-if="shuangsenumber != 0">
					<li class="active" v-for="(  items, index  ) in   item.list  " @click="del(index, 'shuangse')">
						{{ items }}
					</li>
				</ul>

			</div>
		</div>
		<!-- 快乐8  -->
		<div class="bigbox" v-for="(  item, index  ) in   kuaile8count  " v-show="active == 2">
			<div>
				<span class="cishu"><span>出现次数:</span><a>{{ item.cishu }}</a></span>
				<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
			</div>
			<div class="boxs">
				<ul class="ulle" v-if="kuaile8number != 0">
					<li class="active" v-for="(  items, index  ) in   item.list  " @click="del(index, 'kuaile8')">
						{{ items }}
					</li>
				</ul>

			</div>
		</div>
		<!-- 七星彩 -->
		<div class="bigbox" v-for="(  item, index  ) in   liuhecount  " v-show="active == 3">
			<div class="overflow">
				<span class="cishu"><span>号码出现次数:</span><a>{{ item.cishu }}</a></span>
				<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
			</div>
			<div class="boxs">
				<ul class="ulle" v-if="liuhenumber != 0">
					<li class="active" v-for="(  items, index  ) in   item.list  " @click="del3d(index, 'kuaile8XS')">
						{{ items }}
					</li>
				</ul>

			</div>
		</div>



		<!-- <div class="bigtitle" v-show="active == 3">生肖</div> -->
		<div class="overs">
			<span class="cishu" v-show="active == 3"><span>已选:</span><a>{{ liuheSXnumber }}</a><span>个</span></span>
		</div>
		<div class="boxs" v-show="active == 3">
			<ul class="ull">
				<li class=" colorblues" v-for="(  item, index  ) in   chackliuheSX  " @click="del(index, 'liuheSX')"
					v-show="active == 3">
					{{ item.num | getword }}
				</li>
			</ul>
		</div>


		<div class="bigbox" v-for="(  item, index  ) in   liuheSXcount  " v-show="active == 3">
			<div>
				<span class="cishu"><span>生肖出现次数:</span><a>{{ item.cishu }}</a></span>
				<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
			</div>
			<div class="boxs">
				<ul class="ulle" v-if="liuheSXnumber != 0">
					<li class=" colorblues" v-for="(  items, index  ) in   item.list  ">
						{{ items | getword }}
					</li>
				</ul>

			</div>
		</div>


		<div class="title">请选择本次开奖号码：</div>
		<ul class="bgs">
			<li v-show="active == 0" :class="item.active ? 'active' : ''" v-for="(item, index) in fucai3d"
				@click="click(item, 'fucai3d')">
				{{ item.num }}
			</li>
			<li v-show="active == 1" :class="item.active ? 'active' : ''" v-for="(item, index) in shuangse"
				@click="click(item, 'shuangse')">
				{{ item.num }}
			</li>
			<li v-show="active == 2" :class="item.active ? 'active' : ''" v-for="(item, index) in kuaile8"
				@click="click(item, 'kuaile8')">
				{{ item.num }}
			</li>
			<li v-show="active == 3" :class="item.active ? 'active' : ''" v-for="(item, index) in liuhe"
				@click="click(item, 'liuhe')">
				{{ item.num }}
			</li>
		</ul>
	</view>
</template>

<script>

import { jsonp } from 'vue-jsonp'

export default {
	data() {
		return {
			fucai3d: [],//福彩3D
			fucai3dnumber: 0,
			chackfucai3d: [],//点击号码列表
			fucai3dcount: [],//次数号码列表
			shuangse: [],//双色球
			shuangsenumber: 0,
			chackshuangse: [],//点击号码列表
			shuangsecount: [],//次数号码列表
			kuaile8: [],//快了8
			kuaile8number: 0,
			chackkuaile8: [],//点击号码列表
			kuaile8count: [],//次数号码列表
			liuhe: [],//七星彩
			liuhenumber: 0,
			chackliuhe: [],//点击号码列表
			liuhecount: [],//次数号码列表
			liuheSX: [],//七星彩生肖
			liuheSXnumber: 0,
			chackliuheSX: [],//点击号码列表
			liuheSXcount: [],//次数号码列表
			activeball: 0,
			active: 0,
			countarray: [],
			title: 'Hello',
			buttonAnimation: ""
		}
	},
	onLoad() {

	},
	filters: {
		getword(value) {
			let obj = ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"]
			return obj[value]
		}
	},
	created() {
		this.getdata()
	},
	// 福彩3D 0到9      双色球 01到33   快乐8 01到80  六合。01到49。12个生肖
	methods: {
		resetcishu(arraybig, arraysmall) {
			// arraysmall  选择的号码
			let arraybigs = JSON.parse(JSON.stringify(arraybig))
			let arraysmalls = JSON.parse(JSON.stringify(arraysmall))

			arraybigs = arraybigs.map(bigitems => {
				let cishu = 0
				arraysmalls.map(items => {
					if (bigitems.num === items.num) {
						cishu++
					}
				})
				if (cishu > 0) {
					bigitems.active = true
				} else {
					bigitems.active = false
				}
				return bigitems
			})
			return arraybigs
		},
		countOccurrencesAndGroup(numbers) {
			// 初始化一个对象用于存储每个数字出现的次数
			const countMap = {};

			// 遍历数字字符串，统计每个数字出现的次数
			for (const num of numbers) {
				if (countMap[num]) {
					countMap[num]++;
				} else {
					countMap[num] = 1;
				}
			}

			// 初始化一个对象用于存储按次数分组的结果
			const groupedResult = {};

			// 遍历计数对象，按次数分组
			for (const num in countMap) {
				const count = countMap[num];
				if (!groupedResult[count]) {
					groupedResult[count] = [];
				}
				groupedResult[count].push(parseInt(num));
			}
			for (const item in groupedResult) {
				this.countarray.push({
					cishu: item,
					list: groupedResult[item],
					count: groupedResult[item].length
				})
			}
			return this.countarray;
		},
		getcontent(arraybig, arraysmall) {
			console.log(arraybig)
			// arraysmall  选择的号码
			let arraybigs = JSON.parse(JSON.stringify(arraybig))
			let arraysmalls = JSON.parse(JSON.stringify(arraysmall))
			let signnum = [];
			arraysmalls.map(item => {
				signnum.push(item.num)
			})
			let groupedResult = []
			arraybigs.map(item => {
				console.log(item.active == false)
				if (item.active == false) {
					groupedResult.push(item.num)
				}
			})
			this.countarray = []
			this.countarray.push({
				cishu: 0,
				list: groupedResult,
				count: groupedResult.length
			})
			return this.countOccurrencesAndGroup(signnum)

		},
		del(index, name) {
			this['chack' + name].splice(index, 1);
			this[name] = this.resetcishu(this[name], this['chack' + name])
			//以次数为单位 获取每次有哪些号码
			this[name + 'count'] = JSON.parse(JSON.stringify(this.getcontent(this[name], this['chack' + name])))
			this[name + 'number'] = this['chack' + name].length;
		},
		click(item, name) {
			this['chack' + name].push(item)
			this[name] = this.resetcishu(this[name], this['chack' + name])
			//以次数为单位 获取每次有哪些号码
			this[name + 'count'] = JSON.parse(JSON.stringify(this.getcontent(this[name], this['chack' + name])))
			this[name + 'number'] = this['chack' + name].length;


			const animation = uni.createAnimation({
				duration: 200, // 动画持续时间
				timingFunction: 'ease', // 动画的效果
			});

			// 动画的效果，比如缩放、移动等
			animation.scale(1.2).step();

			// 导出动画数据
			this.buttonAnimation = animation.export();
			console.log(this.buttonAnimation)
			// 在下一个 tick 里执行动画
			this.$nextTick(() => {
				// 导入动画数据到按钮
				this.buttonAnimation.translateY(-10).step();
				this.buttonAnimation.opacity = 0;
				this.buttonAnimation = this.buttonAnimation.export();
			});
		},
		getdata() {
			this.fucai3d = [];
			for (var i = 0; i < 10; i++) {
				this.fucai3d.push({ active: false, num: i + '' })
			}
			this.shuangse = [];
			for (var i = 1; i <= 33; i++) {
				this.shuangse.push({ active: false, num: i <= 9 ? '0' + i : i })
			}
			this.kuaile8 = [];
			for (var i = 1; i <= 80; i++) {
				this.kuaile8.push({ active: false, num: i <= 9 ? '0' + i : i })
			}
			this.liuhe = [];
			for (var i = 1; i <= 49; i++) {
				this.liuhe.push({ active: false, num: i <= 9 ? '0' + i : i })
			}
			console.log(this.liuhe)
			this.liuheSX = [];
			let obj = ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"]
			for (var i = 0; i < obj.length; i++) {
				this.liuheSX.push({ active: false, num: i })
			}
		},

	}
}
</script>

<style>
.overs {
	overflow: hidden;
}

.overflow {
	overflow: hidden;
}

.content {
	padding-bottom: 20px;
}

.bigbox {
	margin-top: 10px;
}

.cishu {
	margin-left: 20px;
	font-size: 15px;
	float: left;
	color: #757575;
}

.contents {
	text-align: right;
	padding-top: 20px;
	padding-right: 7px;
	color: #757575;
	font-size: 15px;
	margin-left: 24px;
}

.contents span {
	float: left;
}

.contents a {
	color: #fd503eff;
	float: left;
}

.cishu a {
	color: #fd503eff;
	float: left;
}

.cishu span {
	float: left;
}

.number {
	padding-left: 20px;
	margin-top: 5px;
	color: red;
	font-size: 15px;
}

.tishi {
	color: #939393;
	line-height: 50px;
	margin-left: 20px;
}

.boxs {
	width: 100%;
	min-height: 50px;
	background: #ededed;
	width: 90%;
	margin: 0 auto;
	border-radius: 5px;
}

.bigtitle {
	color: #333;
	margin-top: 30px;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 17px;
	margin-left: 20px;
}

.title {
	color: rgb(85, 85, 85);
	margin-top: 30px;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: bold;
	margin-left: 20px;
}

ul {
	margin: 0 auto;
	overflow: hidden;
	padding: 0 20px;
}

.ull {
	padding: 10px;
}

.ull li {
	width: 38px !important;
	height: 38px !important;
	line-height: 38px !important;
}

.ulle {
	padding: 10px;
}

.ulle li {
	width: 26px !important;
	height: 26px !important;
	font-size: 12px !important;
	line-height: 26px !important;
	margin: 2px !important;
}

ul li {
	list-style: none;
	width: 41px;
	height: 41px;
	line-height: 41px;
	background: rgb(227, 227, 227);
	color: rgb(1, 0, 5);
	text-align: center;
	float: left;
	margin: 3px;
	border-radius: 50%;
	transition: all 0.3s;
}

.ballactive {}

.stop {
	background: rgb(245, 246, 249);
	border-radius: 10px;
	display: flex;
	width: 90%;
	margin: 0 auto;
	margin-top: 20px;
	overflow: hidden;
}

.colorblues {
	color: white !important;
	background: linear-gradient(180deg, #31CAF5 0%, #198CFF 100%) !important;
}

.stop div {
	flex: 1;
	text-align: center;
	line-height: 50px;
	font-size: 18px;
}

.active {
	background: linear-gradient(180deg, #FE8A5C 0%, #FF4D4D 100%) !important;

	/* background:linear-gradient(180deg, #F0F7FE 100%, #FFFFFF 100%); */
	color: white !important;
}

.navactive {
	background: #fd503eff;
	color: white;
}

.bgs {
	width: 95%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 10px;
	background-color: rgb(243, 242, 247);
}

.bgs li>div {
	color: rgb(1, 0, 5);
}
</style>
